<template>
  <el-table :data="this.families" border  style="width: 100%">
    <el-table-column prop="name" label="姓名">
    <template #default="scope">
      <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.name"></el-input>
      <span v-show="!scope.row.show">{{scope.row.name}}</span>
    </template>
    </el-table-column>
    <el-table-column prop="sex" label="性别">
      <template #default="scope">
        <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.sex"></el-input>
        <span v-show="!scope.row.show">{{scope.row.sex}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template #default="scope">
        <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.address"></el-input>
        <span v-show="!scope.row.show">{{scope.row.address}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="phoneNumber" label="电话号码">
      <template #default="scope">
        <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.phoneNumber"></el-input>
        <span v-show="!scope.row.show">{{scope.row.phoneNumber}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="portrait" label="头像">
      <template #default="scope">
        <el-avatar shape="square" :size="80">
          <el-upload ref="upload" :action="fileUploadUrl"
                     :on-success="function (res){
                       return filesUploadSuccess(res, scope.row)
                     }">
            <img :src="scope.row.portrait" alt="点击上传头像" style="height: 80px; width: 80px;"/>
          </el-upload>
        </el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="220px">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="success" @click="handleKeep(scope.$index, scope.row)">保存</el-button>
        <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="不了，谢谢"
            :icon="InfoFilled"
            icon-color="red"
            title="你确定要删除这条关系吗？"
            @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-button size="mini" @click="add()">新增</el-button>
</template>

<script>
import {ElMessage} from "element-plus";
import {delFamily, getFamily, saveFamily, saveHead} from "@/utils/api";

export default {
  name: "Family",
  data(){
    return {
      families: [],
      fileUploadUrl: '/api/files/upload',
    }
  },
  created() {
    // form是当前登陆者的信息，work是登陆人的身份
    this.form = JSON.parse(sessionStorage.getItem("1"))
    var work = sessionStorage.getItem("2")
    if (work === "学生"){
      // 根据当前学生id获取他的家长信息，并渲染上表格
      getFamily(this.form.id).then(res => {
        this.families = res.data
      })
    }
  },
  methods: {
    // 编辑当前行
    handleEdit(index, row) {
      row.show = true
    },
    // 删除当前行
    handleDelete(index, row) {
      // 传回家长id和学生id
      delFamily(+this.form.id+"&"+row.id).then(res => {
        switch (res.code){
          case "0":
            this.families.splice(index,1);
            ElMessage.success('删除成功！');
            break;
          case "1":
            ElMessage.error("删除失败")
        }
      })
    },
    // 保存当前行
    handleKeep(index, row) {
      // 传入学生id,并保存新增的家长信息
      saveFamily(this.form.id,row).then(res => {
        switch (res.code){
          case "0":
            row.show = false
            ElMessage.success('添加成功！')
            break;
          case "1":
            ElMessage.error("添加失败")
        }
      })
    },
    // 新增一行
    add(){
      this.families.push({
        name: '',
        sex: '',
        address: '',
        phoneNumber: ''
      })
    },
    // 换头像
    filesUploadSuccess(res,row) {
      let path = String(res.data).replaceAll("http://localhost:9090","。").replaceAll("/","，")
      saveHead(row.id,path).then(res => {
            switch (res.code){
              case "0":
                ElMessage.success("上传成功")
                break;
              case "1":
                ElMessage.error("上传失败")
            }
      })
      this.$nextTick(() => {
        row.portrait = res.data
      });
    },
  }
}
</script>

<style scoped>

</style>